<!-- 参考文档:https://blog.csdn.net/q283614346/article/details/119565238 -->
<!--  
查看运行信息 DLG
通过调用子控件方法,弹出窗口,并传递参数,对父控件改动较小
调用方式
引入 
  import RunTimeDlg from '@/components/AIT/RunTimeDlg';
  components: { RunTimeDlg },
模板
  <RunTimeDlg ref="RunTimeDlg"></RunTimeDlg>
方法
  handleRunTimeInfo() {
    // 通过调用子控件方法,弹出窗口,并传递参数
    this.$refs.RunTimeDlg.openDlg(this.currentRow.parmname,this.getList);
  },
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="isShow"
    width="80%"
    append-to-body
    ref="refDialog"
  >
    <!-- 
      标题栏增加按钮示例
      <div slot="title" class="dialog-title">
      <el-row>
        <span>{{ title }}</span>
        <i
          class="el-icon-full-screen title-button"
          @click="toggleFullScreen"
        ></i>
      </el-row>
    </div> -->
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      label-width="80px"
      @submit.native.prevent
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="流程编码" prop="flowCode">
            {{ form.flowCode }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="流程名称" prop="flowName">
            {{ form.flowName }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="流程状态" prop="statusName">
            {{ form.statusName }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="运行时间" prop="runTime">
            {{ form.runTime }} 毫秒
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="运行开始" prop="startTime">
            {{ form.startTimeStr }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="运行结束" prop="endTime">
            {{ form.endTimeStr }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="运行方法" prop="method">
            {{ form.method }}
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="错误消息" prop="errMsg" class="single-content">
            <span>{{ form.errMsg || "空" }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- <div>运行日志</div> -->
        <pre>
          <code style="height: 360px;overflow: auto;" class="hljs" v-html="highlightedCode(form.runLog)" ref="preCode"/>
        </pre>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-dropdown style="margin-right: 10px">
        <el-button type="primary">
          相关功能<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <span @click="handleFlowInfo"> 查看流程配置 </span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="handleSQLInfo"> 查看运行SQL </span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="handleRestInfo"> 查看REST调用 </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-button @click="handleLoadInfo" icon="el-icon-refresh" type="success"
        >刷 新</el-button
      >
      <el-button
        @click="handleRunFlow"
        icon="el-icon-video-play"
        type="success"
        :disabled="form.status == 1"
        >{{ form.status === undefined ? "强制运行" : "重新运行" }}</el-button
      >
      <el-button @click="handleCopy" icon="el-icon-copy-document" type="info"
        >拷 贝</el-button
      >
      <el-button @click="closeDlg" icon="el-icon-circle-close" type="info"
        >关 闭</el-button
      >
    </div>
    <!-- 查看流程配置,通过属性传入参数 -->
    <flow-info-dlg :visible.sync="flowOpen" :code="flowCode"></flow-info-dlg>
    <!-- 查看运行SQL信息 -->
    <SQLInfoDlg ref="SQLInfoDlg"></SQLInfoDlg>
    <!-- 查看RestCall信息 -->
    <RestInfoDLG ref="RestInfoDLG"></RestInfoDLG>
  </el-dialog>
</template>

<script>
import copy from "copy-to-clipboard";
import { loadRunTimeInfo, run } from "@/api/aitcommon/aitconfig";
import FlowInfoDlg from "@/components/AIT/FlowInfo";
import SQLInfoDlg from "@/components/AIT/RunTimeDlg/SQLInfo";
import RestInfoDLG from "@/components/AIT/RunTimeDlg/RestInfo";

export default {
  name: "RunTimeDlg",
  components: { FlowInfoDlg, SQLInfoDlg, RestInfoDLG },
  data() {
    return {
      isShow: false,
      loading: false,
      title: "流程运行信息",
      flowCode: "",
      form: {
        flowCode: "",
        flowName: "",
        flowID: "",
        status: "",
        startTime: "",
        endTime: "",
        runTime: "",
        method: "",
        runLog: "",
      },
      callBack: () => {},
      // 流程详情
      flowOpen: false,
      resizeListenerAdded: false,
      fullScreen: false,
    };
  },
  props: {},
  watch: {},
  methods: {
    handleFlowInfo() {
      this.flowOpen = true;
    },
    handleSQLInfo() {
      // 通过调用子控件方法,弹出窗口,并传递参数
      this.$refs.SQLInfoDlg.openDlg(this.flowCode);
    },
    handleRestInfo() {
      // 通过调用子控件方法,弹出窗口,并传递参数
      this.$refs.RestInfoDLG.openDlg(this.flowCode);
    },
    // 高亮代码
    highlightedCode(text) {
      let text1 = text || "";
      // text1 = text1.replaceAll(
      //   /(.* (DEBUG|debug) .*)/g,
      //   '<span class="log-debug">$1</span>'
      // );
      text1 = text1.replaceAll(
        /(.* (WARN|warn) .*)/g,
        '<span class="log-warn">$1</span>'
      );
      text1 = text1.replaceAll(
        /(.* (ERROR|error) .*)/g,
        '<span class="log-error">$1</span>'
      );

      //拼接高亮正则表达式
      let str = "Flow简报";
      str += "|流程日志:步骤\\d+.*";
      str += "|\\[flow\\..*?\\]";
      str += "|成功\\[\\d+\\]条,失败\\[\\d+\\]条";
      str += "|相同条数\\[\\d+\\]条,不同条数\\[\\d+\\]条";
      let reg = new RegExp(`(${str})`, "g");
      // console.info('zzbds:',reg)
      text1 = text1.replaceAll(reg, '<span class="log-import">$1</span>');

      return text1;
    },

    // 通过函数打开对话框,子控件参数也通过函数传入
    // 相比通过属性传入参数,这种做法代码简单
    // 打开对话框
    openDlg(code, callBack = () => {}) {
      if (code) {
        this.flowCode = code;
        this.form.flowCode = code;
      }
      this.callBack = callBack;
      this.isShow = true;
      this.handleLoadInfo();
    },

    // 关闭对话框
    closeDlg() {
      this.isShow = false;
      this.reset();
      // console.info('callback',this.callBack);
      this.callBack();
    },

    // 加载运行信息
    handleLoadInfo() {
      if (!this.isShow) return;
      this.reset();
      this.loading = true;
      loadRunTimeInfo(this.flowCode)
        .then((res) => {
          // 返回可能是空,flowCode必须有值
          this.form = { ...res.data, flowCode: this.flowCode };
          // console.info('handleLoadInfo',this.form)
          if (this.form.status === 1) {
            this.msgInfo("程序正在执行,请手动刷新");
          } else if (this.form.status === 0) {
            this.msgSuccess("刷新完成");
          } else if (this.form.status === undefined) {
            this.msgError("程序尚未执行");
          } else {
            this.msgError("状态异常");
          }
          // 自动滚动到底部
          // 参考:https://blog.csdn.net/weixin_45395031/article/details/107567743
          // 但是无效...
          // this.$refs.preCode.scrollTop = this.$refs.preCode.scrollHeight;
          // console.info('preCode',this.$refs.preCode,this.$refs.preCode.scrollTop ,this.$refs.preCode.scrollHeight)
        })
        .finally((res) => {
          this.loading = false;
        });
    },

    // 拷贝至粘贴板
    handleCopy() {
      if (this.form.runLog) {
        copy(this.form.runLog);
        this.$message("内容已拷贝至粘贴板!");
      }
    },

    handleRunFlow() {
      if (!this.isShow) return;

      this.reset();
      this.loading = true;
      run(this.flowCode)
        .then((res) => {
          setTimeout(() => {
            // 因为是异步调用flow,延时1s刷新
            this.handleLoadInfo();
          }, 500);
        })
        .finally((res) => {
          this.loading = false;
        });
    },

    reset() {
      this.form = {};
      this.form.flowCode = this.flowCode;
    },
  },
};
</script>

<style lang="scss" scoped>
.single-content {
  /* 文本不换行 */
  white-space: nowrap;
  /* 超出隐藏 */
  // overflow: hidden;
  overflow: auto;
  /* 超出的文字省略号表示 */
  text-overflow: ellipsis;
}
// .title-button {
//   margin-right: 20px;
//   font-size: 16px;
//   float: right;
//   color: gray;
//   cursor: pointer;
// }
// .title-button:hover {
//   color: lightblue; /* 鼠标悬停时的高亮文本颜色 */
// }
</style>
